<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}

	.list {
		width: 688rpx;
		padding: 25rpx 0;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
		margin-top: 30rpx;

		.c999 {
			padding-right: 7rpx;
		}

		.h1 {
			border-left: 6rpx solid #409eff;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
		}

		.contains {
			width: 100%;
			padding: 20rpx;
			border-top: 1px solid #eee;

			.text {
				width: 100%;
				line-height: 60rpx;
			}
		}
	}

	.footer {
		height: 160rpx;
		width: 750rpx;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;

		.btn {
			width: 320rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
</style>

<template>
	<view class="content">
		<view class="c999 f28">工单号:{{orderNum}}</view>

		<view v-for="item,index in process" :key="index" v-if="item.operState&&item.operState!='start'">
			<!-- 流程信息 -->
			<view class="list" v-if="item.operState!='complete'">
				<view class="f34 bold h1">{{item.operStateToName}}</view>
				<view class="contains between-flex">
					<view class="text">
						<view class="between-flex">
							<view style="width:60%;"><span class="c999" style="white-space: nowrap;">时间:</span><span style="white-space: nowrap;">{{item.createTime}}</span></view>
							<view class="align-flex"><span class="c999">{{item.operState | processPerson}}:</span><span>{{item.createUserToName}}</span></view>

						</view>
						<view v-if="item.processValue&&item.operState!='assist'&&item.operState!='allocate'" class="flex m-top10"><span class="c999" style="line-height: 28rpx;">{{item.operState | processStateText}}:</span>
							<view class="" style="width:500rpx;line-height: 30rpx;">{{$reason(item.operState,item.processValue)}}</view>
						</view>
						<view v-if="item.operState=='assist'" class="flex m-top10" style="flex-wrap: wrap;">
							<view v-for="item2,index2 in item.assistList" :key="index2" style="width:100%;">
								<view class="between-flex" style="width:100%;">
									<view><span class="c999">协作人:</span><span>{{item2.sendUserToName}}</span></view>
									<view style="width:60%;"><span class="c999">协作状态:</span><span>{{item2.currStateToName}}</span></view>

								</view>
								<view><span class="c999">协作事务:</span><span>{{item2.content}}</span></view>
							</view>
						</view>
						<view v-if="item.operState=='forward'" class="flex m-top10"><span class="c999" style="line-height: 28rpx;">转交至:</span>
							<view class="" style="width:500rpx;line-height: 30rpx;">
								{{item.sendUserToName?item.sendUserToName:'无'}}
							</view>
						</view>
						<view v-if="item.remark" class="flex m-top20"><span class="c999" style="line-height: 28rpx;">详细说明:</span>
							<view class="" style="width:500rpx;line-height: 30rpx;">{{item.remark?item.remark:'无'}}
							</view>
						</view>

						<view class="flex" v-if="item.processEnclosure"><span class="c999">附件:</span>
							<view>
								<view class="align-flex blue p-left10" v-for="item2,index2 in JSON.parse(item.processEnclosure)" @click="$open(item2.url)" :key="index2">
									<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
									{{item2.name |  rightEllipsis}}
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>
			<view class="list" v-if="item.operState=='complete'">
				<view class="f34 bold h1">{{item.operStateToName}}</view>
				<view class="contains between-flex">
					<view class="text">

						<view><span class="c999">工程师:</span><span>{{make.makeUser | user}}</span></view>
						<view><span class="c999" style="white-space: nowrap;">完成时间:</span><span style="white-space: nowrap;">{{item.createTime}}</span></view>
						<view v-if="make.faultType"><span class="c999">故障分类:</span><span>{{make.faultType | faultType}}</span></view>
						<view v-if="make.faultRemark" class="flex "><span class="c999">故障描述:</span>
							<view class="" style="width:500rpx;">{{make.faultRemark | deleteHTMLTag}}</view>
						</view>
						<view class="flex "><span class="c999">解决方法:</span>
							<view class="" style="width:500rpx;">{{make.makeWay?make.makeWay :'无' | Base64Decode | deleteHTMLTag}}</view>
						</view>

						<view><span class="c999">实际工时: </span><span>{{make.realTime || '-'}}小时</span></view>
						<view class="flex" v-if="item.processEnclosure"><span class="c999">附件:</span>
							<view>
								<view class="align-flex blue p-left10" v-for="item2,index2 in JSON.parse(item.processEnclosure)" @click="$open(item2.url)" :key="index2">
									<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
									{{item2.name |  rightEllipsis }}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>


		<view class="list">
			<view class="f34 bold h1">创建工单</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view><span class="c999">建单人:</span><span>{{fault.createUser | user}}</span></view>
						<view style="width:60%;"><span class="c999" style="white-space: nowrap;">建单时间:</span><span style="white-space: nowrap;">{{fault.createTime}}</span></view>
					</view>
					<view class="between-flex">
						<view><span class="c999">来源:</span><span>{{fault.source | source}}</span></view>
						<view style="width:60%;" v-if="fault.reqTime"><span class="c999">预计工时(/小时):</span><span>{{fault.reqTime}}</span>
						</view>
					</view>
					<view><span class="c999">故障分类:</span><span>{{fault.faultType | faultType}}</span></view>
					<view v-if="fault.faultRemark" class="flex "><span class="c999" style="">故障描述:</span>
						<view class="" style="width:500rpx;">{{fault.faultRemark | deleteHTMLTag}}</view>
					</view>
					<view class="flex " v-if="fault.detailInfo"><span class="c999" style="">详细说明:</span>
						<view class="" style="width:500rpx;">{{fault.detailInfo}}</view>
					</view>
					<view class="between-flex">
						<view><span class="c999">紧急程度:</span><span>{{fault.degree | degree}}</span></view>
						<view style="width:60%;"><span class="c999">影响范围:</span><span>{{fault.rangeType | rangeType}}</span></view>
					</view>
					<view><span class="c999">响应类型: </span><span>{{fault.responseType | responseType}}</span></view>
					<view v-if="fault.equipment"><span class="c999">故障设备:</span><span>{{fault.equipment}}</span></view>

					<view class="flex" v-if="fault.enclosure"><span class="c999">附件:</span>
						<view>
							<view class="align-flex blue p-left10" v-for="item,index in fault.enclosure" @click="$open(item.url)" :key="index">
								<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
								{{item.name.substring(item.name.length-10)}}
							</view>
						</view>

					</view>

				</view>

			</view>
		</view>
		<view class="list" v-if="flag">
			<view class="f34 bold h1">接听信息</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view><span class="c999">接听人:</span><span>{{info.reception | user}}</span></view>
						<view style="width:60%;"><span class="c999">通话时间:</span><span>{{info.time?info.time:'无'}}</span>
						</view>
					</view>
					<view class="between-flex">
						<view><span class="c999">报修人:</span><span> {{info.user || '-'}}</span></view>
						<view style="width:60%;"><span class="c999">报修人电话:</span><span @click.stop="$makephone(info.phone)">{{info.phone || '-'}}</span></view>
					</view>
					<view><span class="c999">报修科室: </span><span>{{info.deptId | subject}}</span></view>
					<view v-if="info.place"><span class="c999">报修地址: </span><span>{{info.place}}</span></view>
					<view class="align-flex" v-if="info.recording"><span class="c999">录音:</span>
						<view class="align-flex blue p-left10" @click="playVoice(info.recording)">
							<u-icon name="play-circle" color="#409EFF" size="38">
							</u-icon>{{info.recording.substring(info.recording.length-10)}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="center-flex" style="margin-top: 30rpx;">
			<view @click="flag=!flag" class="align-flex blue">{{flag?'收起':'更多信息'}}
				<view :style="flag?'transform: rotate(-180deg);':'' ">
					<u-icon name="arrow-down" color="#409EFF" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-popup border-radius="24" mode="bottom" v-model="showPopup" :closeable="true">
			<notpass @submit="submit" :orderNum="orderNum"></notpass>
		</u-popup>
		<view style="height:200rpx;"></view>
		<view class="footer between-flex" v-if="showbtn&&fault.processState=='complete'">

			<view class="btn  cfff center-flex f32 bold" style="background-color: #F56C6C;" @click="rejectOrder()">未通过
			</view>
			<view class="btn bgblue cfff center-flex f32 bold" @click="accpetOrder()">通过</view>
		</view>
		<wyb-loading ref="loading" @hide="hide" type="rectangle" title="录音播放中" loading-type="scale-line" />
	</view>
</template>

<script>
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	import notpass from '@/components/order/notpass.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		components: {
			notpass,
			wybLoading
		},
		data() {
			return {
				showPopup: false,
				showbtn: true,
				head: this.$head,
				flag: true, //查看更多
				orderNum: '',
				info: {},
				fault: {},
				make: {},
				process: [], //流程

			}
		},
		onLoad(e) {
			this.orderNum = e.orderNum
			this.getinfo()
			innerAudioContext.onEnded(() => {
				this.$refs.loading.hideLoading()
			});
		},
		methods: {
			submit() {
				this.showPopup = false;
				this.showbtn = false;
				this.goback()
			},
			goback() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if (prevPage.$vm.current) {
					prevPage.$vm.current = 1
				}
				setTimeout(() => {
					uni.navigateBack({

					})
				}, 1500)

			},
			rejectOrder() {

				this.showPopup = true
			},
			accpetOrder() {

				uni.showModal({
					title: '确认通过审核吗？',
					success: (res) => {
						if (res.confirm) {
							this.$pop.ajaxPost('/busOrderExamine/pass', {
								orderNum: this.orderNum
							}).then(res => {
								if (res.code == 0) {
									this.$msg('通过成功')
									this.showbtn = false

									this.goback()
								}
							})
						}
					}
				})
			},
			playVoice(src) {
				console.log('播放录音', src);

				if (src) {
					var a = src.slice(0, 4)
					if (a === 'http') {
						src = src
					} else if (src) {
						src = uni.getStorageSync('imgUrl') + src
					}
					this.$refs.loading.showLoading() // 显示
					innerAudioContext.src = src;
					innerAudioContext.play();
				}
			},
			hide() {
				innerAudioContext.stop();
			},
			getinfo() {
				this.$pop.ajaxPost('/busOrderProcess/getListByOrderNum', {
					orderNum: this.orderNum
				}).then(res => {
					if (res.code == 0) {
						var list = res.body
						// list.forEach(item => {
						// 	if (item.processEnclosure) {
						// 		if (typeof(item.processEnclosure) != "string") {
						// 			item.processEnclosure = JSON.parse(item.processEnclosure)
						// 			var list = item.processEnclosure

						// 			item.processEnclosure = list
						// 		}

						// 	}

						// })
						// console.log(list)
						this.process = list
					}
				})
				this.$pop.ajaxPost('/busOrderInfo/getByOrderNum', {
					orderNum: this.orderNum
				}).then(res => {
					if (res.code == 0) {
						this.info = res.body.info || {}
						this.fault = res.body.fault || {}
						this.make = res.body.make || {}
						if (this.make.cooperation) {
							this.make.cooperation = JSON.parse(this.make.cooperation)
						}
						if (this.fault.enclosure) {
							this.fault.enclosure = JSON.parse(this.fault.enclosure)
						}
					}
				})
			}

		}
	}
</script>
